<template>
  <view class="privacy-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image src="/static/settings/back.png" mode="widthFix"></image>
      </view>
      <text class="title">隐私设置</text>
    </view>

    <!-- 隐私设置列表 -->
    <view class="setting-list">
      <view 
        v-for="(item, index) in privacySettings" 
        :key="index" 
        class="setting-item"
      >
        <!-- 左侧图标 + 标题 -->
        <view class="item-left">
          <image :src="item.icon" class="item-icon"></image>
          <text class="item-title">{{ item.label }}</text>
        </view>

        <!-- 右侧操作区（箭头/开关/子设置） -->
        <view class="item-right">
          <!-- 跳转下一级（如个人资料、动态范围） -->
          <view v-if="item.type === 'navigate'" @click="navigateTo(item)">
            <image src="/static/settings/back.png" class="arrow-icon"></image>
          </view>

          <!-- 开关（如好友推荐） -->
          <switch 
            v-else-if="item.type === 'switch'" 
            :checked="item.value" 
            @change="toggleSwitch(item)"
          ></switch>

          <!-- 分组设置（如消息通知） -->
          <view v-else-if="item.type === 'group'">
            <view 
              v-for="(subItem, subIndex) in item.children" 
              :key="subIndex" 
              class="sub-setting"
            >
              <text class="sub-label">{{ subItem.label }}</text>
              <switch 
                :checked="subItem.value" 
                @change="toggleSubSwitch(item, subItem)"
              ></switch>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 隐私设置项配置（可扩展）
      privacySettings: [
        {
          label: '个人资料可见性',
          icon: '/static/privacy/profile.png',
          type: 'navigate',
          page: '/pages/privacy/profile-visibility', // 需创建子页面
          options: ['所有人', '好友', '仅自己']
        },
        {
          label: '动态可见范围',
          icon: '/static/privacy/moment.png',
          type: 'navigate',
          page: '/pages/privacy/moment-visibility', // 需创建子页面
          options: ['所有人', '好友', '自定义']
        },
        {
          label: '好友推荐',
          icon: '/static/privacy/friend-recommend.png',
          type: 'switch',
          value: true
        },
        {
          label: '消息通知',
          icon: '/static/privacy/notification.png',
          type: 'group',
          children: [
            { label: '系统通知', value: true },
            { label: '活动提醒', value: true },
            { label: '好友消息', value: true }
          ]
        }
      ]
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 跳转下一级页面（如个人资料可见性设置）
    navigateTo(item) {
      uni.navigateTo({ url: item.page });
    },

    // 切换开关（如好友推荐）
    toggleSwitch(item) {
      item.value = !item.value;
      uni.showToast({ 
        title: `好友推荐已${item.value ? '开启' : '关闭'}`, 
        icon: 'none' 
      });
      // TODO: 调用后端接口保存设置
    },

    // 切换分组内的开关（如消息通知子项）
    toggleSubSwitch(groupItem, subItem) {
      subItem.value = !subItem.value;
      uni.showToast({ 
        title: `${subItem.label}已${subItem.value ? '开启' : '关闭'}`, 
        icon: 'none' 
      });
      // TODO: 调用后端接口保存设置
    }
  }
}
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #42b983; /* 应用主色调 */
  --text-color: #333;       /* 主文本色 */
  --text-light-color: #666; /* 辅助文本色 */
  --bg-color: #f5f5f5;      /* 页面背景色 */
  --card-bg: #fff;          /* 卡片背景色 */
}

/* 页面容器 */
.privacy-container {
  background-color: var(--bg-color);
  min-height: 100vh;
}

/* 顶部导航 */
.header {
  height: 100rpx;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn image {
  width: 24rpx;
  height: 40rpx;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  margin: 0 auto;
}

/* 设置列表 */
.setting-list {
  padding: 20rpx;
}

/* 单个设置项（卡片） */
.setting-item {
  background-color: var(--card-bg);
  margin-bottom: 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.item-title {
  font-size: 32rpx;
  color: var(--text-color);
}

.item-right {
  display: flex;
  align-items: center;
}

.arrow-icon {
  width: 20rpx;
  height: 34rpx;
}

/* 分组内的子设置 */
.sub-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.sub-label {
  font-size: 28rpx;
  color: var(--text-light-color);
  margin-right: 20rpx;
}
</style>